<template>
  <div>
    <dv-loading v-if="loadingS">加载中...</dv-loading>
    <dv-border-box-11 id="screenContainer" title="大数据可视化平台">
      <div class="box">
        <div class="box-box"></div>
        <div class="box-left">
          <div class="left-box1">
            <dv-border-box-12 id="borderBox1">
              <div class="div-boxS">
                <Box2/>
              </div>
            </dv-border-box-12>
          </div>
          <div class="left-box2">
            <dv-border-box-12 id="borderBox2">
              <div class="div-box2">222222222</div>
            </dv-border-box-12>
          </div>
          <div class="left-box3">
            <dv-border-box-12 id="borderBox3">
              <div class="div-box3">
                
              </div>
            </dv-border-box-12>
          </div>
          <div class="left-box2">
            <dv-border-box-12 id="borderBox2">
              <div class="div-box2">
                <Box3/>
              </div>
            </dv-border-box-12>
          </div>
          <div class="left-box1">
            <dv-border-box-13 id="borderBox1">
              <div class="div-box1">
                <Box1/>
              </div>
            </dv-border-box-13>
          </div>
        </div>
        <div class="box-right">
          <div class="right-box">
            <dv-border-box-13>dv-border-box-13</dv-border-box-13>
          </div>
          <div class="right-box">
            <dv-border-box-12>dv-border-box-12</dv-border-box-12>
          </div>
        </div>
      </div>
    </dv-border-box-11>
  </div>
</template>
<script>
    import Box1 from "@/components/box1.vue";
    import Box2 from "@/components/box2.vue";
    import Box3 from "@/components/box3.vue";
export default {
  name: "davTa",
  components:{
    Box1,
    Box2,
    Box3
  },
  data() {
    return {
      loadingS: true,
    };
  },
  mounted() {
    this.loading();
  },
  methods: {
    loading() {
      setTimeout(() => {
        this.loadingS = false;
      }, 500);
    },
  },
};
</script>
<style lang="scss" scoped>

  #screenContainer {
    width: 100vw;
    height: 100vh;
    display: flex;
    .box {
      width: 96vw;
      height: 90vh;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -47%);
      display: flex;
      flex-direction: column;
      .box-left {
        flex: 1;
        display: flex;
        .left-box1 {
          #borderBox1 {
            width: 220px;
            color: white;
            padding: 15px;
           
            .div-box1{
              position: absolute;
              top: 50%;
              left: 46%;
              transform: translate(-50%,-50%);
            }
          }
        }
        .left-box2 {
          #borderBox2 {
            width: 250px;
            color: white;
            padding: 15px;
           
          }
        }
        .left-box3 {
          flex: 1;
          display: flex;
          #borderBox3 {
            flex: 1;
            color: white;
            padding: 15px;
           
          }
        }
      }
      .box-right {
        flex: 1;
        display: flex;
        .right-box {
          flex: 1;
        }
      }
    }
    .box-box {
      width: 100%;
      height: 50px;
      background-color: aqua;
    }
    #borderBox {
      width: 200px;
      height: 280px;
      color: white;
      padding: 10px;
    }
  }

</style>